<template>
  <div class="sysBox">
    <div class="boxNav">
      <ul>
        <li
          v-for="(item, index) in arr"
          :key="index"
          @click="fn(index)"
          :class="[num1 == index ? 'active' : '']"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="boxStairs">
      <el-scrollbar height="607px">
        <div class="boxSb" style="height: 210px">
          <span class="boxSb-t">密码:</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">你设置了记住密码，登录时无须再输入。</p>
            <p>
              <el-button size="small">取消记住密码</el-button>
            </p>
            <p>为了你的账号安全，请定期修改密码并申请密码保护</p>
            <p>
              <el-button size="small">修改密码</el-button>
              <el-button size="small">申请密码保护</el-button>
            </p>
            <p>某些服务将用到独立密码</p>
            <p>
              <el-button size="small">管理独立密码</el-button>
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 140px">
          <span class="boxSb-t">界面锁 :</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">
              <label for="dl1">
                <input
                  type="radio"
                  name="dl"
                  value="dlmm1"
                  id="dl1"
                  checked
                />&nbsp;&nbsp; 使用登录密码解锁</label
              >
            </p>
            <p>
              <label for="dl2">
                <input type="radio" name="dl" value="dlmm2" id="dl2" />
                &nbsp;&nbsp;使用独立密码解锁（登录密码也可以解锁）</label
              >
            </p>
            <p>
              <el-button size="small">更改热键</el-button>
              <el-button size="small">自动锁定设置</el-button>
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 265px">
          <span class="boxSb-t">消息记录:</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">
              <label for="dllt1">
                <input
                  type="checkbox"
                  checked
                  id="dllt1"
                />&nbsp;&nbsp;登录系统时间同步最近聊天记录</label
              >
            </p>
            <p>
              <label for="dllt2">
                <input
                  type="checkbox"
                  id="dllt2"
                />&nbsp;&nbsp;仅查看本机消息记录</label
              >
            </p>
            <p>
              <label for="dllt3"
                ><input
                  type="checkbox"
                  id="dllt3"
                />&nbsp;&nbsp;退出系统时自动删除所有消息记录</label
              >
            </p>
            <p>如果你需要删除某个人或者某个群的消息记录，请使用消息管理器</p>
            <p>
              <el-button size="small ">打开消息管理器</el-button>
            </p>
            <p>你可以对全部消息记录按时间段删除</p>
            <p>
              <el-button size="small ">删除消息记录</el-button>
            </p>
            <p>
              <label for="dllt4"
                ><input
                  type="checkbox"
                  id="dllt4"
                />&nbsp;&nbsp;启用消息记录加密</label
              >
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 265px">
          <span class="boxSb-t">安全推荐:</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">
              <label for="dllt1">
                <input
                  type="checkbox"
                  id="dllt1"
                />&nbsp;&nbsp;同步近聊天记录</label
              >
            </p>
            <p>
              <label for="dllt2">
                <input
                  type="checkbox"
                  id="dllt2"
                />&nbsp;&nbsp;仅查看本机消息记录</label
              >
            </p>
            <p>
              <label for="dllt3"
                ><input
                  type="checkbox"
                  id="dllt3"
                  checked
                />&nbsp;&nbsp;退出系统时自动删除所有消息记录</label
              >
            </p>
            <p>如果你需要删除某个人或者某个群的消息记录，请使用消息管理器</p>
            <p>
              <el-button size="small ">打开消息管理器</el-button>
            </p>
            <p>你可以对全部消息记录按时间段删除</p>
            <p>
              <el-button size="small ">删除消息记录</el-button>
            </p>
            <p>
              <label for="dllt4"
                ><input
                  type="checkbox"
                  id="dllt4"
                />&nbsp;&nbsp;启用消息记录加密</label
              >
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 265px">
          <span class="boxSb-t">安全更新:</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">
              <label for="dllt1">
                <input
                  type="checkbox"
                  checked
                  id="dllt1"
                />&nbsp;&nbsp;登录系统时间同步最近聊天记录</label
              >
            </p>
            <p>
              <label for="dllt2">
                <input
                  type="checkbox"
                  id="dllt2"
                />&nbsp;&nbsp;仅查看本机消息记录</label
              >
            </p>
            <p>
              <label for="dllt3"
                ><input
                  type="checkbox"
                  id="dllt3"
                />&nbsp;&nbsp;退出系统时自动删除所有消息记录</label
              >
            </p>
            <p>如果你需要删除某个人或者某个群的消息记录，请使用消息管理器</p>
            <p>
              <el-button size="small ">打开消息管理器</el-button>
            </p>
            <p>你可以对全部消息记录按时间段删除</p>
            <p>
              <el-button size="small ">删除消息记录</el-button>
            </p>
            <p>
              <label for="dllt4"
                ><input
                  type="checkbox"
                  id="dllt4"
                />&nbsp;&nbsp;启用消息记录加密</label
              >
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 265px">
          <span class="boxSb-t">文件传输:</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">
              <label for="dllt1">
                <input
                  type="checkbox"
                  checked
                  id="dllt1"
                />&nbsp;&nbsp;登录系统时间同步最近聊天记录</label
              >
            </p>
            <p>
              <label for="dllt2">
                <input
                  type="checkbox"
                  id="dllt2"
                />&nbsp;&nbsp;仅查看本机消息记录</label
              >
            </p>
            <p>
              <label for="dllt3"
                ><input
                  type="checkbox"
                  id="dllt3"
                />&nbsp;&nbsp;退出系统时自动删除所有消息记录</label
              >
            </p>
            <p>如果你需要删除某个人或者某个群的消息记录，请使用消息管理器</p>
            <p>
              <el-button size="small ">打开消息管理器</el-button>
            </p>
            <p>你可以对全部消息记录按时间段删除</p>
            <p>
              <el-button size="small ">删除消息记录</el-button>
            </p>
            <p>
              <label for="dllt4"
                ><input
                  type="checkbox"
                  id="dllt4"
                />&nbsp;&nbsp;启用消息记录加密</label
              >
            </p>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { ElButton, ElScrollbar } from "element-plus";
export default {
  data() {
    return {
      arr: ["密码", "界面锁", "消息记录", "安全推荐", "安全更新", "文件传输"],
      num1: localStorage.getItem("index2") || 0,
      num: 0,
    };
  },

  components: {
    ElButton,
    ElScrollbar,
  },

  computed: {},

  mounted() {},

  methods: {
    fn(a) {
      this.num1 = a;
      localStorage.setItem("index2", a);
    },
  },
};
</script>

<style lang="less" scoped>
.sysBox {
  width: 100%;
  height: 700px;
  background-color: #fff;
  position: relative;
  display: flex;
  .boxNav {
    position: absolute;
    top: 0;
    left: -20px;
    li {
      width: 200px;
      height: 51px;
      font-size: 14px;
      font-weight: 600;
      text-align: left;
      text-indent: 25px;
      line-height: 51px;
      color: #000;
      background-color: #f5f5f5;
    }
    .active {
      background-color: #fff;
    }
  }
  .boxStairs {
    flex: 1;
    margin-left: 180px;
    height: 620px;
    width: 960px;
    .boxSb {
      display: flex;
      width: 960px;
      .boxSb-t {
        width: 150px;
        height: 55px;
        line-height: 55px;
        font-size: 12px;
        display: inline-block;
        text-indent: 50px;
      }
      .boxSb-b {
        flex: 1;
        p {
          height: 30px;
          width: 500px;
          line-height: 30px;
          font-size: 12px;
          label {
            vertical-align: middle;
            input {
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>
